<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车</title>

    <link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="./basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="./css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="./css/optstyle.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="./js/jquery.js"></script>
    <script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="./AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
    <!-- 导入vue和axios的js文件 -->
    <script src="./plugins/vue/dist/vue.js"></script>
    <script src="./plugins/axios/dist/axios.js"></script>
    <script src="./js/common.js"></script>

</head>

<body>
<div id="app">
    <!--顶部导航条 -->
    <div class="am-container header">
        <ul class="message-l">
            <div class="topMessage">
                <div class="menu-hd">
                    <a href="javascript:;" v-if="username">欢迎您，{{username}}</a>
                    <a href="./login.html" v-if="!username" target="_top" class="h">亲，请登录</a>
                    <a href="./register.html" v-if="!username" target="_top">免费注册</a>
                </div>
            </div>
        </ul>
        <ul class="message-r">
            <div class="topMessage home">
                <div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
            </div>
            <div class="topMessage my-shangcheng">
                <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
                </div>
            </div>
            <div class="topMessage mini-cart">
                <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                        class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                              class="h">0</strong></a></div>
            </div>
            <div class="topMessage favorite">
                <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
                </div>
            </div>
        </ul>
    </div>

    <!--悬浮搜索框-->
    <div class="nav white">
        <div class="logo"><img src="./images/logo.png"/></div>
        <div class="logoBig">
            <li><img src="./images/logobig.png"/></li>
        </div>

        <div class="search-bar pr">
            <a name="index_none_header_sysc" href="#"></a>
            <form>
                <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
            </form>
        </div>
    </div>

    <div class="clear"></div>

    <!--购物车 -->
    <div class="concent" >
        <div id="cartTable">
            <div class="cart-table-th">
                <div class="wp">
                    <div class="th th-chk">
                        <div id="J_SelectAll1" class="select-all J_SelectAll">

                        </div>
                    </div>
                    <div class="th th-item">
                        <div class="td-inner">商品信息</div>
                    </div>
                    <div class="th th-price">
                        <div class="td-inner">单价</div>
                    </div>
                    <div class="th th-amount">
                        <div class="td-inner">数量</div>
                    </div>
                    <div class="th th-sum">
                        <div class="td-inner">金额</div>
                    </div>
                    <div class="th th-op">
                        <div class="td-inner">操作</div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>

            <!--购物车列表信息-->
            <tr class="item-list" >
                <div class="bundle  bundle-last ">
                    <!--<div class="bundle-hd">
                        <div class="bd-promos">
                            <div class="bd-has-promo">已享优惠:<span class="bd-has-promo-content">省￥19.50</span>&nbsp;&nbsp;
                            </div>
                            <div class="act-promo">
                                <a href="#" target="_blank">第二支半价，第三支免费<span class="gt">&gt;&gt;</span></a>
                            </div>
                            <span class="list-change theme-login">编辑</span>
                        </div>
                    </div>-->
                    <div class="clear"></div>
                    <div class="bundle-main">
                        <ul class="item-content clearfix" v-for="sc in shopcarts">
                            <li class="td td-chk">
                                <div class="cart-checkbox ">
                                    <input class="check" :id="'J_CheckBox_'+sc.id" name="items" :value="sc.id" @click="check(sc)" type="checkbox">
                                    <label :for="'J_CheckBox_'+sc.id"></label>
                                </div>
                            </li>
                            <li class="td td-item">
                                <div class="item-pic">
                                    <a href="#" target="_blank" data-title="美康粉黛醉美东方唇膏口红正品 持久保湿滋润防水不掉色护唇彩妆"
                                       class="J_MakePoint" data-point="tbcart.8.12">
                                        <img :src="fastdfsUrl+sc.product.resources.split(',')[0]" class="itempic J_ItemImg" style="width: 78px"></a>
                                </div>
                                <div class="item-info">
                                    <div class="item-basic-info">
                                        <a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色"
                                           class="item-title J_MakePoint" data-point="tbcart.8.11">{{sc.product.name}}</a>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-info">
                                <div class="item-props item-props-can">
                                    <span class="sku-line">颜色：12#川南玛瑙</span>
                                    <span class="sku-line">包装：裸装</span>
                                    <span tabindex="0" class="btn-edit-sku theme-login">修改</span>
                                    <i class="theme-login am-icon-sort-desc"></i>
                                </div>
                            </li>
                            <li class="td td-price">
                                <div class="item-price price-promo-promo">
                                    <div class="price-content">
                                        <div class="price-line">
                                            <em class="price-original">78.00</em>
                                        </div>
                                        <div class="price-line">
                                            <em class="J_Price price-now" tabindex="0">{{sc.price}}</em>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-amount">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <div class="sl">
                                            <input class="am-btn" name="" type="button" @click="sub(sc)"  value="-"/>
                                            <input class="text_box"  name="" type="text" :value="sc.buycount" style="width:30px;"/>
                                            <input class="am-btn" name="" type="button" @click="add(sc)"  value="+"/>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-sum">
                                <div class="td-inner">
                                    <em tabindex="0" class="J_ItemSum number" name="J_ItemSum">{{sc.amount}}</em>
                                </div>
                            </li>
                            <li class="td td-op">
                                <div class="td-inner">
                                    <a title="移入收藏夹" class="btn-fav" href="#">
                                        移入收藏夹</a>
                                    <a href="javascript:;" data-point-url="#" class="delete">
                                        删除</a>
                                </div>
                            </li>
                        </ul>

                    </div>

                </div>
            </tr>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>

        <div class="float-bar-wrapper">
            <div id="J_SelectAll2" class="select-all J_SelectAll">
                <div class="cart-checkbox">
                    <input class="check-all check" id="J_SelectAllCbx2" @click="check_all_no"  name="select-all" value="true" type="checkbox">
                    <label for="J_SelectAllCbx2"></label>
                </div>
                <span>全选</span>
            </div>
            <div class="operations">
                <a href="#" hidefocus="true" class="deleteAll">删除</a>
                <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
            </div>
            <div class="float-bar-right">
                <div class="amount-sum">
                    <span class="txt">已选商品</span>
                    <em id="J_SelectedItemsCount">{{count}}</em><span class="txt">件</span>
                    <div class="arrow-box">
                        <span class="selected-items-arrow"></span>
                        <span class="arrow"></span>
                    </div>
                </div>
                <div class="price-sum">
                    <span class="txt">合计:</span>
                    <strong class="price">¥<em id="J_Total">{{total}}</em></strong>
                </div>
                <div class="btn-area">
                    <a href="pay.html" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                        <span>结&nbsp;算</span></a>
                </div>
            </div>

        </div>

        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="#">恒望科技</a>
                    <b>|</b>
                    <a href="#">商城首页</a>
                    <b>|</b>
                    <a href="#">支付宝</a>
                    <b>|</b>
                    <a href="#">物流</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="#">关于恒望</a>
                    <a href="#">合作伙伴</a>
                    <a href="#">联系我们</a>
                    <a href="#">网站地图</a>
                    <em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
                        - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
                </p>
            </div>
        </div>

    </div>

    <!--操作页面-->
    <div class="theme-popover-mask"></div>

    <div class="theme-popover">
        <div class="theme-span"></div>
        <div class="theme-poptit h-title">
            <a href="javascript:;" title="关闭" class="close">×</a>
        </div>
        <div class="theme-popbod dform">
            <form class="theme-signin" name="loginform" action="" method="post">

                <div class="theme-signin-left">

                    <li class="theme-options">
                        <div class="cart-title">颜色：</div>
                        <ul>
                            <li class="sku-line selected">12#川南玛瑙<i></i></li>
                            <li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
                        </ul>
                    </li>
                    <li class="theme-options">
                        <div class="cart-title">包装：</div>
                        <ul>
                            <li class="sku-line selected">包装：裸装<i></i></li>
                            <li class="sku-line">两支手袋装（送彩带）<i></i></li>
                        </ul>
                    </li>
                    <div class="theme-options">
                        <div class="cart-title number">数量</div>
                        <dd>
                            <input class="am-btn am-btn-default" name="" type="button"  value="-"/>
                            <input class="text_box" name="" type="text" value="1" style="width:30px;"/>
                            <input class="am-btn am-btn-default" name="" type="button"  value="+"/>
                            <span class="tb-hidden">库存<span class="stock">1000</span>件</span>
                        </dd>

                    </div>
                    <div class="clear"></div>
                    <div class="btn-op">
                        <div class="btn am-btn am-btn-warning">确认</div>
                        <div class="btn close am-btn am-btn-warning">取消</div>
                    </div>

                </div>
                <div class="theme-signin-right">
                    <div class="img-info">
                        <img src="./images/kouhong.jpg_80x80.jpg"/>
                    </div>
                    <div class="text-info">
                        <span class="J_Price price-now">¥39.00</span>
                        <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <!--引导 -->
    <div class="navCir">
        <li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
        <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
        <li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
        <li><a href="./person/index.html"><i class="am-icon-user"></i>我的</a></li>
    </div>
</div>
<script type="text/javascript">

    new Vue({
        el:"#app",
        data:{
            shopcarts:[],
            total:0,
            count:0
        },
        methods:{
            loadData(){
                this.$http.get("/shopcart").then(res=>{
                    /*let {success,message,data} = res.data
                    if(success){
                        this.shopcarts = data.shopcart;
                    }else {
                        alert("数据加载失败！")
                    }*/
                    this.shopcarts = res.data
                })
            },
            //购物车商品数量添加
            add(sc){
                sc.buycount++;
                let param={
                    id:sc.id,
                    product_id:sc.product_id,
                    price:sc.price,
                    buycount:sc.buycount
                };
                this.$http.put("/shopcart",param).then(res=>{
                    this.loadData();
                })
            },
            //购物车商品数量减少
            sub(sc){
                sc.buycount--;
                let param={
                    id:sc.id,
                    product_id:sc.product_id,
                    price:sc.price,
                    buycount:sc.buycount
                };
                this.$http.put("/shopcart",param).then(res=>{
                    this.loadData();
                })
            },
            //全选
            check_all_no(){
                let all_or_no =document.getElementById("J_SelectAllCbx2");
                let car_goods =document.getElementsByName("items");
                let J_ItemSum =document.getElementsByName("J_ItemSum");
                if (all_or_no.checked) {
                    for (let i=0;i<car_goods.length;i++){
                        car_goods[i].checked=true;
                        this.total  += parseInt($(J_ItemSum[i]).html());
                        this.count++;
                    }
                }else {
                    for (let i = 0; i < car_goods.length; i++)
                        car_goods[i].checked= false;
                    this.total = 0;
                    this.count = 0;
                }
            },
            //计算金额
            check(sc){
                //判断当前复选框是否被选中
                if($("#J_CheckBox_"+sc.id).is(":checked")){
                    this.total  += sc.amount;
                    this.count++;
                }else {
                    this.total  -= sc.amount;
                    this.count--;
                }
            }
        },
        mounted(){
            this.loadData();
        },
        computed: {
            username() {
                let jsonStr = localStorage.getItem("userJsonStr");
                if(jsonStr){
                    let user =  JSON.parse(jsonStr);
                    return user.username;
                }
            },
        }
    })

</script>

</body>
</html>